<!--
 * @Author: your name
 * @Date: 2021-08-24 13:55:48
 * @LastEditTime: 2021-09-14 15:33:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\index.vue
-->

<template>
  <!-- 主面板 -->
  <Layout id="components-layout-demo-custom-trigger" style="min-height: 100vh">
    <Layout>
      <!-- 侧边栏 -->
      <V-silder v-if="getAutoLayout"></V-silder>
      <!-- 移动端侧边栏 -->
      <VAutoDrawer v-if="!getAutoLayout"></VAutoDrawer>
      <LayoutContent class="vcontent" :style="{ maxHeight: viewHeight + 'px' }">
        <!-- 顶部导航栏 -->
        <V-header></V-header>
        <!-- 导航历史 -->
        <VHeaderNav></VHeaderNav>
        <div :style="{ maxHeight: viewHeight + 'px' }" class="vpage">
          <VPageload v-if="!refvalue"></VPageload>
          <V-page v-if="refvalue"></V-page>
        </div>
      </LayoutContent>
    </Layout>
  </Layout>
</template>

<script lang="ts">
import VHeader from './header.vue';
import VSilder from './silder.vue';
import VHeaderNav from './headernav.vue';
import VPage from '../page/index.vue';
import { defineComponent, ref, unref, computed } from 'vue';
import { getOpenKeepAlive } from '../setting/setRouter';
import { useWindowSizeFn } from '../ntils/hooks';
import { reloadRouter, autoWindow } from '../setting/menuTrigger';
import VPageload from './pageload.vue';
import VAutoDrawer from './minSilder.vue';
import { Layout } from 'ant-design-vue';
export default defineComponent({
  name: 'Index',
  components: {
    VHeader,
    VSilder,
    VPage,
    Layout,
    LayoutContent: Layout.Content,
    VHeaderNav,
    VPageload,
    VAutoDrawer
  },
  setup() {
    // 持续集成
    getOpenKeepAlive();
    // 响应式窗口
    let { autoValue } = autoWindow();
    const getAutoLayout = computed(() => unref(autoValue.value));
    // 重新加载
    let { reloadRefsValue } = reloadRouter(true);
    let refvalue = computed(() => unref(reloadRefsValue));
    let viewHeight = ref(720);
    let vh = useWindowSizeFn();
    viewHeight.value = vh - 80;
    // 主模板监听视口变化 使用js来做响应式
    // 侧边栏显示隐藏

    return {
      viewHeight,
      refvalue,
      getAutoLayout
    };
  }
});
</script>
<style lang="less" scoped>
@import '../styles/pagestyle.less';
.vcontent {
  width: 100%;
  position: relative;
  //  overflow: hidden;
}
.vpage {
  width: 100%;
  padding: 10px;
  overflow-y: scroll;
  max-height: 0;
  position: relative;
  overflow-x: hidden;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
